<template>
  <div style="padding-bottom: 10px">
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item,index) in messageData" :key="index">
        <el-card :body-style="{ padding: '0px' }">
          <div class="show-data" :class="background[index]">
            <el-row :gutter="20">
              <el-col :span="3">
                <i :class="icon[index]" style="font-size: 28px;"/>
              </el-col>
              <el-col :span="12">
                <span>{{item.title}}</span>
              </el-col>
            </el-row>
            <el-row style="padding-top: 10px">
              <el-col>
                <span class="show-data-total">{{item.total}}</span>
              </el-col>
              <el-col class="show-data-variation">
                <span>比昨日新增</span>
                <span>{{item.variation?item.variation:0}}</span>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { listPhysicalReport } from '@/api/quality/physicalReport'
import { formatToDayTime } from '@/utils/ruoyi'
import { listPhysicalDefect } from '@/api/quality/physicalDefect'
import { listContinuousImprovement } from '@/api/quality/continuousImprovement'
import { listUser } from '@/api/system/user'

export default {
  name: 'Message',
  data(){
    return {
      messageData:[
        {title:'实物通报',total:'',variation:''},
        {title:'质量问题',total:'',variation:''},
        {title:'持续改善',total:'',variation:''},
        {title:'人员',total:'',variation:''},
      ],
      background:["bg1", "bg2", "bg3", "bg4"],
      icon:[
        'el-icon-receiving','el-icon-data-analysis','el-icon-finished','el-icon-user'
      ],
      // 查询参数
      queryParams: {},
    }
  },
  created() {
    this.getTotalList(this.queryParams);
    const date = formatToDayTime(new Date());
    this.getVariationList(date);
  },
  methods: {
    /** 查询质量通报列表 */
    getTotalList(params) {
      listPhysicalReport(params).then(response => {
        this.messageData[0].total = response.total;
      });
      listPhysicalDefect(params).then(response => {
        this.messageData[1].total = response.total;
      });
      listContinuousImprovement(params).then(response => {
        this.messageData[2].total = response.total;
      });
      listUser(params).then(response => {
        this.messageData[3].total = response.total;
      });
    },

    getVariationList(date){
      this.queryParams.reportDate = date;
      listPhysicalReport(this.queryParams).then(response => {
        this.messageData[0].variation = response.total;
      });
      this.queryParams.defectDate = date;
      listPhysicalDefect(this.queryParams).then(response => {
        this.messageData[1].variation = response.total;
      });
      this.queryParams.date = date;
      listContinuousImprovement(this.queryParams).then(response => {
        this.messageData[2].variation = response.total;
      });
      listUser(this.queryParams).then(response => {
        this.messageData[3].variation = response.total;
      });
    }
  }
}
</script>

<style scoped>

.show-data {
  padding: 14px;
  color: #ffffff
}

.show-data-total {
  font-size: 42px;
  padding-left: 4px;

}

.bg1{
  background: rgba(86,34,243,0.7);
}
.bg2{
  background: #67C23A;
}
.bg3{
  background: rgb(246, 150, 70);
}
.bg4{
  background: #F56C6C;
}

</style>
